<template>
  <el-card class="dashboard-container">
    <!--  欢迎词  -->
    <template #header>
      <div class="dashboard-text">欢迎您: {{ trueName }}</div>
    </template>

    <!--  各自的数量  -->
    <el-container>
      <el-header>
        <el-row :gutter="20" type="flex" justify="center" align="middle">

          <el-col :span="6">
            <el-button type="info" plain round
                       :disabled="$hasBP('bnt.sysUser.list')  === false" @click="goRouter('/system/sysUser')"
            >
              <el-statistic
                group-separator=","
                :value="userCount"
                title="用户数量"
              ></el-statistic>
            </el-button>
          </el-col>

          <el-col :span="6">
            <el-button type="info" plain round
                       :disabled="$hasBP('bnt.sysRole.list')  === false" @click="goRouter('/system/sysRole')"
            >
              <el-statistic
                group-separator=","
                :value="roleCount"
                title="角色数量"
              ></el-statistic>
            </el-button>
          </el-col>

          <el-col :span="6">
            <el-button type="info" plain round
                       :disabled="$hasBP('bnt.sysDept.list')  === false" @click="goRouter('/system/sysDept')"
            >
              <el-statistic
                group-separator=","
                :value="deptCount"
                title="部门数量"
              ></el-statistic>
            </el-button>
          </el-col>

          <el-col :span="90">
            <el-button type="info" plain round
                       :disabled="$hasBP('bnt.sysPost.list')  === false" @click="goRouter('/system/sysPost')"
            >
              <el-statistic
                group-separator=","
                :value="postCount"
                title="岗位数量"
              ></el-statistic>
            </el-button>
          </el-col>

        </el-row>
      </el-header>
    </el-container>

    <!--  分割线  -->
    <el-divider><i class="el-icon-arrow-down"></i></el-divider>

    <!--  echarts图表  -->
    <el-main>
      <el-row>
        <!--  男女比例  -->
        <el-col :span="70">
          <div id="sexCount" style="width: 600px;height:400px;"></div>

        </el-col>

        <!--  已分配角色数量  -->
        <el-col :span="10">
          <div id="roleCount" style="width: 600px;height:400px;"></div>
        </el-col>
      </el-row>

    </el-main>

    <!--  分割线  -->
    <el-divider><i class="el-icon-arrow-up"></i></el-divider>

    <!--  座右铭  -->
    <el-footer>
      <div>
        <span>
        座右铭：{{ introduction ? introduction : '无' }}
      </span>
        <el-button type="primary" icon="el-icon-edit" size="mini" title="编辑座右铭"
                   @click="goRouter('/user/profile')"
        ></el-button>
      </div>

    </el-footer>
  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
import api from '@/api/count'

export default {
  name: 'Dashboard',
  // 计算属性
  computed: {
    ...mapGetters([
      'trueName',
      'introduction'
    ])
  },

  data() {
    return {
      userCount: 0,   //用户数量
      roleCount: 0,   //角色数量
      deptCount: 0,   //部门数量
      postCount: 0,   //岗位数量

      roleNameList: [],   //已分配角色名称
      roleCountList: [],   //已分配角色数量

      maleCount: 0, // 男用户数量
      femaleCount: 0 // 女用户数量
    }
  },

  // 页面渲染后执行
  mounted() {
    // 调用列表方法
    this.fetchData()
  },

  methods: {
    // 数据获取及渲染
    async fetchData() {
      // 各自的数量
      await api.getQuantity().then(response => {
        this.userCount = response.data.userCount
        this.roleCount = response.data.roleCount
        this.deptCount = response.data.deptCount
        this.postCount = response.data.postCount
      })

      // 男女数量
      await api.getSexCount().then(response => {
        this.maleCount = response.data.maleCount
        this.femaleCount = response.data.femaleCount
      })

      // 已分配角色数量
      await api.getRoleCount().then(response => {
        this.roleNameList = response.data.roleNameList
        this.roleCountList = response.data.roleCountList
      })

      this.roleCountEcharts()
      this.sexCountEcharts()

    },

    // echarts 男女比例
    sexCountEcharts() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('sexCount'))

      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '男女比例'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        series: [
          {
            type: 'pie',
            label: {
              show: true,
              formatter: '{b}: {c} ({d}%)'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '15',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true
            },
            data: [
              {
                value: this.maleCount,
                name: '男'
              },
              {
                value: this.femaleCount,
                name: '女'
              }
            ]
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },

    // echarts 已分配角色数量
    roleCountEcharts() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('roleCount'))

      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '已分配角色数量'
        },
        tooltip: {},
        xAxis: {
          data: this.roleNameList
        },
        yAxis: {},
        series: [{
          name: '已分配角色',
          type: 'bar',
          data: this.roleCountList
        }]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },

    // 路由跳转
    goRouter(path) {
      this.$router.push(path)
    }
  }

}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 20px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
